<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>图书详情</title>
</head>
<style>
  [v-cloak] {
    display: none;
  }

</style>

<body>
  <div v-show='!!bookInfo.name' id="body" style="height: 100%" v-cloak>
    <div id="booklist">
      <div class="box2">
        <div class="content">
          <ul>
            <li>
              <group>
                <div class="left-book">
                  <img :src="bookInfo.cover" onerror="this.src='/static/book.jpg'" alt="">
                </div>
                <div class="right-book">
                  <p class="title">{{bookInfo.name}}</p>
                  <p style="font-size:14px;color:#424242">金额:{{bookInfo.price}}</p>
                  <p>
                    <span class="author">作者：{{bookInfo.author}}</span>
                    <!-- <span class="status">已领取</span> -->
                  </p>
                  <p class="content">库存：{{bookInfo.inventory}}本
                    <i v-if='!bookInfo.collected' ref='dom1' class="iconfont icon-shoucang1" @click='collectButton($event,bookInfo.id)'></i>
                    <i v-if='bookInfo.collected' ref='dom1' class="iconfont icon-shoucang2" @click='collectButton($event,bookInfo.id)'></i>
                    <span>{{bookInfo.collect_count}}</span>
                    <i @click="goComment" class="iconfont icon-comment21"></i>
                    <span>{{bookInfo.comment_count}}</span>
                  </p>
                  <p class="buttons">
                    <div v-if="(bookInfo.inventory>>0)>0">
                      <x-button v-if='bookInfo.borrowed' :disabled='true' mini type="primary">已借阅</x-button>
                      <x-button v-if='!bookInfo.borrowed' @click.native='borrow(bookInfo.id)' mini type="primary">借阅</x-button>
                      <x-button  v-if='bookInfo.collected'  @click.native='collectButton($event,bookInfo.id)' :disabled='true' mini type="primary">已收藏</x-button>
                      <x-button  v-if='!bookInfo.collected'  @click.native='collectButton($event,bookInfo.id)' mini type="primary">收藏</x-button>
                      <!-- <x-button mini type="primary">预约</x-button> -->
                    </div>
                    <div v-if="(bookInfo.inventory>>0)<=0">
                      
                      <!-- <x-button @click.native='borrow(bookInfo.id)' :disabled='true'  mini type="primary">借阅</x-button> -->
                      <x-button v-if='!isExpired' mini @click.native='reservation(bookInfo.id)' type="primary">预约</x-button>
                      <x-button  v-if='bookInfo.collected'  @click.native='collect2' :disabled='true' mini type="primary">已收藏</x-button>
                      <x-button  v-if='!bookInfo.collected'  @click.native='collect2' mini type="primary">收藏</x-button>
                    </div>
                  </p>
                </div>
              </group>
            </li>
          </ul>
        </div>
      </div>
    </div>


    <sticky ref="sticky">
      <tab :line-width="1">
        <tab-item v-if='index==0' selected v-for="(item,index) in categoriesList" @click.native="show(index)">{{item.name}}
        </tab-item>
        <tab-item v-if='index!=0' ref="comment" class="needsclick" v-for="(item,index) in categoriesList" @click.native="show(index)">{{item.name}}
        </tab-item>
      </tab>
    </sticky>


    <div id="content" class="content">


      <div>
        <transition :name="transitionName">
          <div v-show="listIndex==0" class="bookList">
            <scroller lock-x height="-260" ref="scroller">
              <div class="content" v-html='bookInfo.detail'>
                <p>0-3岁幼儿的习惯培养要靠父母反复说与反复教？不，这套翻翻绘本将为千万妈妈解决育儿烦恼——好习惯真的可以“玩”出来!</p>
                <p>※极具创意的翻翻绘本，0-3岁幼儿习惯培养启蒙的“好玩伴”，围绕刷牙、吃饭、洗澡、拉臭4方面行为习惯培养问题创作，随书贴心附送8件玩具，让宝贝在游戏中养成生活好习惯。</p>
                <p>※形式新颖，幼儿可以边翻边玩，在重复有趣动作的过程中提高动手能力；故事语言使用精妙，邀请式的语句反复出现，使孩子的参与感更强，更专注于趣味游戏与亲密的互动中。</p>
                <p>※小开本，让孩子轻松掌控；磨圆角，保护娇嫩小手；硬纸板，随意翻折，宝贝就能一玩再玩。</p>
                <div>
                  <img src="./static/detail.jpg" alt="">
                </div>
                <p>
                  （禹田文化出品）创意翻翻绘本，0-3岁娃必备习惯培养启蒙书。附送8件玩具，家长可邀请娃和动物一起刷牙、吃饭、洗澡、拉臭，看谁做得快又好。重复有趣的动作，在互动游戏中让孩子养成好习惯，提高动手和语言能力</p>
              </div>
            </scroller>
          </div>
        </transition>
      </div>

      <div>
        <transition :name="transitionName">
          <div v-show="listIndex==1" class="bookList">
            <scroller lock-x height="-60" ref="scroller">
              <!-- <div v-if='commentsList.length==1' class="comment">
                <ul>
                  <li class='vux-1px-b'>
                    <div class="clearfix">
                      <div class="portrait">
                        <img src="./static/head2.png" alt="">
                      </div>
                      <div class="contant">
                        <div>
                          <h3 class="name">李冰</h3>
                          <p class="date">12:12</p>
                        </div>
                        <p class="discuss">适合妈妈给1-2岁的小朋友讲，3岁的小朋友有点简单了。简单的说内容脑洞大开，不错，让孩子爱不释手</p>
                         <p class="button">查看对话</p> 
                      </div>
                    </div>
                  </li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                </ul>
              </div> -->

              <div style="text-align:center;padding-top:30px" v-if='commentsList.length==0' class="comment">
                <div>暂时没有评论</div>
              </div>


              <div v-if='commentsList.length!=0' class="comment">

                <scroller style="top:0px" lock-x scrollbar-y height="-260" ref="scroller" use-pullup v-model="demo4Value" @on-pullup-loading="load4">
                  <div class="box2">
                    <div class="content">
                      <ul>
                        <li class='vux-1px-b' v-for="(item,index) in commentsList">
                          <div class="clearfix">
                            <div class="portrait">
                              <img :src="item.user.avatar" alt="">
                            </div>
                            <div class="contant">
                              <div>
                                <h3 class="name">{{item.user.name}}</h3>
                                <p class="date">{{item.created_at.split(' ')[0]}}</p>
                              </div>
                              <p class="discuss">{{item.content}}</p>
                              <!-- <p class="button">查看对话</p>  -->
                            </div>
                          </div>
                        </li>
                      </ul>

                      <!-- <ul>
                        <li v-for="(item,index) in commentsList">
                          <group>
                            <div class="left-book"><img :src="item.cover" alt=""></div>
                            <div class="right-book">
                              <p class="title">{{item.name}}</p>
                              <p><span class="author">{{item.author}}</span>
                              </p>
                              <p class="content">当前借阅<span>{{item.borrow_count}}</span>次</p>
                              <p class="buttons">
                                <x-button @click.native="goDetail(item.id)" mini type="primary">我要借阅</x-button>
                              </p>
                            </div>
                          </group>
                        </li>
                      </ul> -->
                    </div>
                  </div>
                  <div v-if='!stop' slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 50px; bottom: -50px; text-align: center;">
                    <span v-show="demo4Value.pullupStatus === 'default'"></span>
                    <span class="pullup-arrow" v-show="demo4Value.pullupStatus === 'default' || demo4Value.pullupStatus === 'up' || demo4Value.pullupStatus === 'down'"
                      :class="{'rotate': demo4Value.pullupStatus === 'down'}">↑</span>
                    <span v-show="demo4Value.pullupStatus === 'loading'">
                      <spinner type="ios-small"></spinner>
                    </span>
                  </div>

                  <div v-if='stop' class="nomore">没有更多</div>


                </scroller>
              </div>





            </scroller>
          </div>
        </transition>
      </div>


    </div>

    <foot :index="1"></foot>

  </div>

</body>

</html>
